<template>
    <div class="wrap">
        <slider>
            <div v-for="item in indexBanners">
                <a :href="item.linkUrl">
                    <img class="needsclick" :src="item.picUrl">
                </a>
            </div>
        </slider>
        <div class="container">
            <!-- 我们能为您做什么 -->
            <section class="padding-b">
                <div class="head-title"><i></i><span>我们能为您做什么</span><i></i></div>
                <ul class="index-service">
                    <li v-for="(item,index) in services">
                        <router-link :to="item.link">
                            <div :class="'icon'+(index+1)"></div>
                            <p>{{item.title}}</p>
                        </router-link>
                    </li>
                </ul>
            </section>
            <!-- 商学院培训 -->
            <section class="index-train-wrap padding-b">
                <div class="head-title"><i></i><span>商学院培训</span><i></i></div>
                <ul class="index-train">
                    <li v-for="(item,index) in trains">
                        <router-link class="item" :class="'bg'+(index+1)" :to="item.link"><div class="index-train-mask">{{item.title}}</div></router-link>
                    </li>
                </ul>
            </section>
            <section class="index-advan-wrap padding-b">
                <div class="head-title"><i></i><span>服务优势</span><i></i></div>
                <ul class="index-advan">
                    <li v-for="item in advans">
                        <span>{{item.title}}</span>
                        <div>{{item.con}}</div>
                    </li>
                </ul>
            </section>
        </div>
        <m-bottom></m-bottom>
    </div>
</template>
<script type="text/javascript">
import Slider from 'base/slider/slider'
import MBottom from 'components/m-bottom/m-bottom'

export default{
    data(){
        return{
            indexBanners:[
                {
                    picUrl:require("../../common/img/banner/ban01.jpg"),
                    linkUrl:"#"
                },
                {
                    picUrl:require("../../common/img/banner/business-town.jpg"),
                    linkUrl:"#"
                },
                {
                    picUrl:require("../../common/img/banner/plan-town1.jpg"),
                    linkUrl:"#"
                }
            ],
            services:[
                {
                    link:"plan_town/",
                    title:"特色小镇"
                },
                {
                    link:"plan_countryside/",
                    title:"田园综合体"
                },
                {
                    link:"plan_estate",
                    title:"产业地产"
                },
                {
                    link:"plan_park",
                    title:"园区规划"
                },
                {
                    link:"industry_alliance",
                    title:"产业联盟"
                },
                {
                    link:"plan_tour",
                    title:"文旅规划"
                },
                {
                    link:"capital",
                    title:"资本运营"
                },
                {
                    link:"javascript:;",
                }
            ],
            trains:[
                {
                    link:"business_town",
                    title:"特色小镇与田园综合体落地班"
                },
                {
                    link:"business_block",
                    title:"区块链"
                },
                {
                    link:"business_secret",
                    title:"董秘特训营"
                }
            ],
            advans:[
                {

                    title:"中厚明德产业研究院",
                    con:"中厚明德产业研究院致力于产业整合与研究，成立中厚明德产业联盟，多年以来已积累产业资源达万余家，其中不乏大型国企央企、集团型企业、上市公司以及新三板优质企业。汇聚数十位拥有成功项目运作经验的国内外专家学者作为平台智库。"
                },
                {
                    title:"中厚明德拥有专业独立的规划咨询团队",
                    con:"拥有专业独立的规划咨询团队，自建调研分析系统，围绕产业新城、特色小镇、田园综合体等规划运营各环节，为企业提供创建方案、产业定位、城市定位与规划、模式创新、IP打造、协助申报、顶层设计、产业导入、资金导入、招商运营、品牌打造等全方位解决方案，伴随企业成功打造标杆项目，已为国内多家企业提供专业的产业规划咨询服务，并成功申报。"
                },
                {
                    title:"中厚明德资本研究院",
                    con:"中厚明德资本研究院围绕“资金、资源、资本”为企业提供资本运营整体解决方案。汇聚多位拥有上市公司运作经验、上万家项目投资经验的国内外投融资专家，为企业提供企业并购、投融资、商业模式、股权模式、投融资、企业IPO/新三板挂牌、财务法务等咨询、辅导、落地服务。"
                }
            ]
        }
    },
    components:{
        Slider,
        MBottom
    }
}
</script>
<style scoped>
.index-service{
    overflow: hidden;
}
.index-service li{
    float: left;
    width: 25%;
    height:90px;
}
.index-service li a{
    width: 100%;
    height: 100%;
    display: inline-block;
    border:1px solid #fff;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}
.index-service li a:hover{
    border:1px solid #f4f4f4;
    box-shadow: 0 0 20px #f4f4f4;
}
.index-service li:last-child a:hover{
    border:1px solid #fff;
    box-shadow:none;
    background-color:#fff;
}
.index-service li a div{
    width: 38px;
    height:35px;
    margin:10px auto 16px auto;
    display: block;
    transition: 0.5s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}
.index-service li:nth-child(1),
.index-service li:nth-child(2),
.index-service li:nth-child(3),
.index-service li:nth-child(4){
    margin-bottom: 16px;
}
.index-service li a div.icon1{background:url(../../common/img/i-icon1.png);background-size: 100% 100%;}
.index-service li a div.icon2{background:url(../../common/img/i-icon2.png);background-size: 100% 100%;}
.index-service li a div.icon3{background:url(../../common/img/i-icon3.png);background-size: 100% 100%;}
.index-service li a div.icon4{background:url(../../common/img/i-icon4.png);background-size: 100% 100%;}
.index-service li a div.icon5{background:url(../../common/img/i-icon5.png);background-size: 100% 100%;}
.index-service li a div.icon6{background:url(../../common/img/i-icon6.png);background-size: 100% 100%;}
.index-service li a div.icon7{background:url(../../common/img/i-icon7.png);background-size: 100% 100%;}
.index-service li a div.icon8{background:url(../../common/img/i-icon8.png);background-size: 100% 100%;}

.index-service li a p{
    text-align: center;
}
.index-train-wrap{
    width: 100%;
    overflow: hidden;
    border-bottom:4px solid #f5f5f5;
}
.index-train{
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding:0 12px;
}
.index-train li{
    width: 100%;
    height: 150px;
    margin-bottom: 4px;
}
.index-train li a{
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
}
.index-train li a.bg1{
    background:url(../../common/img/i-train1.jpg) no-repeat;
    background-size: 100% 100%;
}
.index-train li a.bg2{
    background:url(../../common/img/i-train2.jpg) no-repeat;
    background-size: 100% 100%;
}
.index-train li a.bg3{
    background:url(../../common/img/i-train3.jpg) no-repeat;
    background-size: 100% 100%;
}
.index-train-mask{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px;
    height:30px;
    line-height: 30px;
    background:rgba(0,0,0,0.5);
    color:#fff;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.index-advan{
    background:url(../../common/img/i-advan.jpg) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    width:100%;
    padding-top: 24px;
}
.index-advan li{
    float: left;
    width:100%;
    box-sizing: border-box;
    color: #fff;
    letter-spacing: 1px;
}
.index-advan li span{
    width: 100%;
    line-height: 34px;
    display: inline-block;
    padding-left:28px;
    box-sizing: border-box;
    font-size: 16px;
    background:rgba(60,127,213,0.65);
}
.index-advan li div{
    padding:24px 28px 26px 28px;
    line-height: 22px;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

</style>
